﻿@model IEnumerable<Web.Models.LOAISP>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<!-- Tabs -->
<div class="tabs">
	<ul>
        @for (int i = 0; i < Model.Count(); i++)
        {
            if (i == 0)
            {
                <li><a href="#" class="active"><span>@Model.ElementAt(i).TenLoaisp</span></a></li>
            }
            else
            { 
                 <li><a href="#"><span>@Model.ElementAt(i).TenLoaisp</span></a></li>
            }
        }
		
	</ul>
</div>
<!-- Tabs -->
			
<!-- Container -->
<div id="container">
				
	<div class="tabbed">
					
	    @for (int i = 0; i < Model.Count(); i++)
        {
                <div class="tab-content" @if (i == 0) { Html.Raw("style='display:block;'"); }>
		        <div class="items">
			        <div class="cl">&nbsp;</div>
			        <ul>
                        @foreach (var sp in Model.ElementAt(i).SANPHAMs.ToList())
                        {
                            <li>
						        <div class="image">
							        <a href="#" class="popup" onclick="showDetails('@sp.MaSP');return false;">
                                        <img src="@Url.Content("~/Content/css/images/" + sp.Hinh_SP)" alt="@sp.TenSP" />
                                    </a>
						        </div>
						        <p>
							   
							        Brand Name: <a href="#">@sp.TenSP</a>
						        </p>
						        <p class="price">Giá bán <strong>@sp.giaban VND</strong></p> <input type="button" value="Mua hàng" onclick="addToCart('@sp.MaSP')" style="background-color:Orange; background-image:ulr(~/images/plus.png);"/>
					        </li>
                        
                        }   
			        </ul>
			        <div class="cl">&nbsp;</div>
		        </div>
	        </div> 
        }
	
					
    </div>
				
   
				
</div>
<!-- End Container -->

<!-- Product Details -->
<div id="product-details" class="reveal-modal"  style="width:300px;height:300px">
    <div id="inner">
        
    </div>
	<a class="close-reveal-modal">&#215;</a>
</div>

<!-- End Product Details -->
<!--- tao model----->

<!----ajax----->
<script type="text/javascript">


    function showDetails(id) {
        $("#product-details #inner").html("");
        $.get("/Product/Details?productId=" + id, function (data) {
            $("#product-details #inner").html(data);

            while ($("#product-details #inner").html() == "") { }
        });
        $("#product-details").reveal();
    }

    function addToCart(id) {
        $.get("/Cart/Add?ID=" + id, function (data) {
            
            $(".right .cart strong").html(data.tongsotien);
        });
    }
    
</script>
